import './App.css';
import {useRef, useState} from "react";

function Son(props) {
    /**
     * 子组件只能读取props中的数据，不能直接进行修改,
     * 父组件的数据只能由父组件修改
     */
    console.log(props)
    return (
        <div>
            <h1>{props.name}</h1>
            <h1>{props.children}</h1>
        </div>
    )
}

function App() {

    let name = '张三';
    /**
     * 当我们把内容嵌套在组件的标签内部时，
     * 组件会自动在名为children的prop属性中接收该内容
     */
    return (
        <div>
            <Son name={name}>
                <span>888</span>
            </Son>
        </div>
    )
}

export default App;